<template>
    <div class="con">
        <img src="../assets/images/logo.png" alt="" class="logo" onclick="return false">
        <img src="../assets/images/fareCode.png" alt="" onclick="return false">
        <img :src="siteImageUrl+$route.params.title_img" alt="" class="shopTitle" onclick="return false">      
        <div id="erweima"></div>
  
        
    </div>
</template>

<script>
    
import QRCode from 'qrcodejs2'
export default {

    name: "fare",
    data() {
        return {
            msg: "Welcome to Your Vue.js App"
        };
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].className = "bg_Code";
    },
    mounted: function() {
            var erweima=document.getElementById('erweima')
            // 设置参数方式
            var qrcode = new QRCode('erweima', {
                text: this.$route.params.code,
                width: "190",
                height: "190",
                colorDark : '#000000',
                colorLight : '#ffffff',
                correctLevel : QRCode.CorrectLevel.H
                });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con{
  text-align: center;
  position: relative;
}
.con img{
  width: 100%;
}
.con .logo{
    width: 34%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,30%);

}
.con .shopTitle{
  position: absolute;
  top: 20.5%;
  left: 24%;
  width: 50%;
}
.con .fare30{
  position: absolute;
  left: 2%;
  top:30%;
}
.con .fare65{
  position: absolute;
  left: 3%;
  top:64%;
}

#erweima{
    position: absolute;
    width: 190px;
    height: 190px;
    left: 50%;
    transform: translate(-52%,-32%);
    top:52%;
}
</style>
